<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产计划</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    body {
        background-color: white;
    }
</style>
<body>
<style>
</style>
<div id="pro">
    <el-header style="height: 90px">
        <div>
            <template>
                <el-dropdown @command="addjihua">
                    <el-button type="primary">
                        添加生产计划<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">添加成品生产计划</el-dropdown-item>
                        <el-dropdown-item command="b">添加半成品生产计划</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
            <template>
                <el-dropdown @command="addjiagong">
                    <el-button type="info">
                        下达加工单<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">下达加工单</el-dropdown-item>
                        <el-dropdown-item command="b">下达委外加工单</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
            <el-button type="danger">删除</el-button>
        </div>
        <div style="margin-top: 10px">
            <template>
                <el-radio-group v-model="vo.prostateid">
                    <el-radio v-model="vo.prostateid" :label="-1">全部</el-radio>
                    <el-radio
                            v-for="option in stateSearch"
                            :key="option.Id"
                            :label="option.id">
                        {{ option.name }}
                    </el-radio>
                </el-radio-group>
                <el-date-picker
                        v-model="searchdate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        @change="allot">
                </el-date-picker>
            </template>
            <el-button icon="el-icon-search" circle @click="search"></el-button>
        </div>
    </el-header>
    <el-container>
        <template>
            <el-table
                    :data="proList"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    height="78vh">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        width="50"
                        prop="planId"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="planNumber"
                        label="计划单号">
                </el-table-column>
                <el-table-column
                        prop="billsDate"
                        label="单据日期">
                </el-table-column>
                <el-table-column
                        prop="proId"
                        label="产品编号">
                </el-table-column>
                <el-table-column
                        prop="proName"
                        label="产品名称">
                </el-table-column>
                <el-table-column
                        prop="proSpe"
                        label="规格型号">
                </el-table-column>
                <el-table-column
                        prop="calUnit"
                        label="计量单位">
                </el-table-column>
                <el-table-column
                        prop="proNum"
                        label="生产数量">
                </el-table-column>
                <el-table-column
                        prop="planCompletedate"
                        label="计划完工日期">
                </el-table-column>
                <el-table-column
                        prop="orderName"
                        label="状态">
                </el-table-column>
            </el-table>
            <el-drawer
                    title="添加成品生产计划"
                    :visible.sync="drawer"
                    size="100%"
                    :with-header="false">
                <el-form>
                    <el-row style="margin-left: 0;margin-right: 0" :gutter="10">
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="计划单号">
                                    <el-input v-model="orderdata.plannumber" :disabled="true"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="订单单号">
                                    <el-input v-model="orderdata.orderNumber" @focus="ordersearch"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="产品编号">
                                    <el-input v-model="orderdata.commId"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="产品名称">
                                    <el-input v-model="orderdata.productName"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-left: 0;margin-right: 0" :gutter="10">
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="规格型号">
                                    <el-input v-model="orderdata.catName"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="计量单位">
                                    <el-input v-model="orderdata.proUnits"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="生产数量">
                                    <el-input v-model="orderdata.orderNum"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="生产单价">
                                    <el-input v-model="orderdata.orderPrice"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-left: 0;margin-right: 0" :gutter="10">
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="订单总价">
                                    <el-input v-model="orderdata.orderCount"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="单据日期">
                                    <el-input v-model="orderdata.orderDate"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="计划完工日期">
                                    <el-input v-model="orderdata.deliveryDate"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <span style="display: flex; justify-content: flex-end; padding-right: 50px;">
    <el-button @click="plancall">取 消</el-button>
    <el-button type="primary" @click="planensure">确 定</el-button>
  </span>
            </el-drawer>
            <el-dialog
                    title="销售订单明细选择"
                    :visible.sync="orderFing"
                    width="80%"
                    :before-close="handleClose">
                <template>
                    <el-table
                            :data="orderlistdata"
                            style="width: 100%"
                            @selection-change="orderdataChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="ordcomId"
                                label="编号">
                        </el-table-column>
                        <el-table-column
                                prop="orderNumber"
                                label="订单单号">
                        </el-table-column>
                        <el-table-column
                                prop="commId"
                                label="产品单号"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="productName"
                                label="产品名称">
                        </el-table-column>
                        <el-table-column
                                prop="proUnits"
                                label="计量单位">
                        </el-table-column>
                        <el-table-column
                                prop="catName"
                                label="规格型号">
                        </el-table-column>
                        <el-table-column
                                prop="orderNum"
                                label="产品数量">
                        </el-table-column>
                        <el-table-column
                                prop="orderPrice"
                                label="产品单价">
                        </el-table-column>
                        <el-table-column
                                prop="orderCount"
                                label="产品总价">
                        </el-table-column>
                        <el-table-column
                                prop="orderDate"
                                label="单据时间">
                        </el-table-column>
                        <el-table-column
                                prop="deliveryDate"
                                label="计划完成时间">
                        </el-table-column>
                    </el-table>
                </template>
                <span slot="footer" class="dialog-footer">
    <el-button @click="orderFing = false">取 消</el-button>
    <el-button type="primary" @click="savelist">确 定</el-button>
  </span>
            </el-dialog>
            <!--            下达订单计划-->
            <el-dialog
                    title="提示"
                    :visible.sync="processFing"
                    width="90%">
                <el-form>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="加工单号">
                                    <el-input v-model="processdata.processNumber"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="单据日期">
                                    <el-input v-model="processdata.orderDate"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="生产计划">
                                    <el-input v-model="processdata.manuId"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="加工工序">
                                    <el-input v-model="processdata.bomId"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="货品编号">
                                    <el-input v-model="processdata.goodsId"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="货品名称">
                                    <el-input v-model="processdata.goodsName"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="规格">
                                    <el-input v-model="processdata.spec"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-form-item label="计量单位">
                                    <el-input v-model="processdata.units"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="生产数量">
                                    <el-input v-model="processdata.proNumber"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="开工日期">
                                    <div class="block">
                                        <el-date-picker
                                                v-model="processdata.opendate"
                                                style="width: 272px"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="生产车间">
                                    <template>
                                        <el-select v-model="processdata.proplant" style="width: 272px"
                                                   placeholder="请选择">
                                            <el-option label="车间1" value="车间1"></el-option>
                                            <el-option label="车间2" value="车间2"></el-option>
                                            <el-option label="车间3" value="车间3"></el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ">
                                <el-form-item label="完工日期">
                                    <div class="block">
                                        <el-date-picker
                                                style="width: 272px"
                                                v-model="processdata.finishdate"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="call">取 消</el-button>
    <el-button type="primary" @click="yes">确 定</el-button>
  </span>
            </el-dialog>
        </template>
    </el-container>
</div>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
<script>
    new Vue({
        el: "#pro",
        data: {
            proList: [],
            stateSearch: [],
            searchdate: [],
            vo: {
                prostateid: -1,
                startdate: '',
                overdate: ''
            },
            drawer: false,
            orderFing: false,
            processFing: false,
            multipleSelection: [],
            multiple: [],
            orderlistdata: [],
            orderdata: {},
            processdata: {},
            planId: '',
            cid: ''
        },
        methods: {
            adda() {
                this.drawer = true;
            },
            baddb() {
                this.drawer = true;
            },
            //添加生产计划
            addjihua(command) {
                if (command === 'a') {
                    console.log("成品")
                    let plannum = "pl"
                    plannum += this.generateId();
                    this.orderdata.plannumber = plannum;
                    this.cid = 2;
                    this.adda();
                } else {
                    console.log("半成品")
                    let plannum = "bl"
                    plannum += this.generateId();
                    this.orderdata.plannumber = plannum;
                    this.cid = 3;
                    this.baddb();
                }
            },
            //下达加工单
            addjiagong(command) {
                if (command == 'a') {
                    console.log("自加工")
                    this.process();
                } else {
                    console.log("委外")
                }
            },
            //获取订单单号
            generateId() {
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0'); // 加入秒数
                // 将年月日时分秒组合成编号
                return `${year}${month}${day}${hours}${minutes}${seconds}`;
            },
            //当点击订单编号输入框时，触发事件查询
            ordersearch() {
                this.orderdatalist();
            },
            orderdatalist() {
                this.orderFing = true;
                axios.get("/pro/orderdatalist?cid="+this.cid)
                    .then(({data}) => {
                        this.orderlistdata = data.data;
                    })
            },
            //保存
            savelist() {
                if (this.multiple.length != 1) {
                    this.$message.warning("请选择一个商品!");
                    return;
                }
                //选中数据回显
                this.orderdata.orderId = this.multiple[0].orderId;
                this.orderdata.ordcomId = this.multiple[0].ordcomId;
                this.orderdata.catName = this.multiple[0].catName;
                this.orderdata.commId = this.multiple[0].commId;
                this.orderdata.deliveryDate = this.multiple[0].deliveryDate;
                this.orderdata.orderCount = this.multiple[0].orderCount;
                this.orderdata.orderDate = this.multiple[0].orderDate;
                this.orderdata.orderNum = this.multiple[0].orderNum;
                this.orderdata.orderNumber = this.multiple[0].orderNumber;
                this.orderdata.orderPrice = this.multiple[0].orderPrice;
                this.orderdata.proUnits = this.multiple[0].proUnits;
                this.orderdata.productName = this.multiple[0].productName;
                //关闭弹窗
                this.orderFing = false;
            },
            //关闭
            plancall() {
                this.drawer = false;
                this.empty();
            },
            empty() {
                this.orderdata.orderId = '';
                this.orderdata.catName = '';
                this.orderdata.commId = ''
                this.orderdata.deliveryDate = '';
                this.orderdata.orderCount = '';
                this.orderdata.orderDate = '';
                this.orderdata.orderNum = '';
                this.orderdata.orderNumber = '';
                this.orderdata.orderPrice = '';
                this.orderdata.proUnits = '';
                this.orderdata.productName = '';
            },
            //保存
            planensure() {
                axios.post("/pro/planadd", this.orderdata)
                    .then(({data}) => {
                        this.drawer = false;
                        this.search();
                        this.empty();
                    })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            search() {
                axios.get("/pro/search", {params: this.vo})
                    .then(({data}) => {
                        this.proList = data.data;
                    })
                this.searchdate = '';
                this.vo.startdate = '';
                this.vo.overdate = ''
            },
            radiosearch() {
                axios.get("/pro/stateSearch")
                    .then(({data}) => {
                        this.stateSearch = data.data;
                    })
            },
            allot() {
                this.vo.startdate = this.searchdate[0];
                this.vo.overdate = this.searchdate[1];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.planId = this.multipleSelection[0].planId;
                this.processdata.goodsName = this.multipleSelection[0].proName;
                this.bomidsearch();
            },
            del() {
                axios.delete()
            },
            orderdataChange(val) {
                this.multiple = val;
                console.log(val)
            },
            //查询bomid
            bomidsearch() {
                axios.get("/pro/bomidsearch?name=" + this.processdata.goodsName)
                    .then(data => {
                        this.processdata.bomId = data.data;
                    })
            },
            //下达加工单
            process() {
                if (this.multipleSelection.length != 1) {
                    this.$message({
                        message: '请选择一条计划进行加工!',
                        type: 'warning'
                    });
                    return;
                }
                this.processFing = true;
                let aa = "pe";
                aa = this.generateId();
                this.processdata.processNumber = aa;
                this.processdata.orderDate = this.multipleSelection[0].billsDate;
                this.processdata.manuId = this.multipleSelection[0].planNumber;
                this.processdata.goodsId = this.multipleSelection[0].proId;
                this.processdata.goodsName = this.multipleSelection[0].proName;
                this.processdata.spec = this.multipleSelection[0].proSpe;
                this.processdata.units = this.multipleSelection[0].calUnit;
                this.processdata.proNumber = this.multipleSelection[0].proNum;
            },
            //取消
            call() {
                this.processFing = false;
                this.processdata.completedate = '';
                this.processdata.plant = '';
                this.processdata.startworkdate = '';
            },
            //添加
            yes() {
                console.log(this.processdata)
                axios.post("/pro/addprocess", this.processdata)
                    .then(({data}) => {
                        this.processFing = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        axios.get("/pro/stateupdate?id=" + this.planId);
                    })
            }
        },
        mounted() {
            this.search();
            this.radiosearch();
        }
    })
</script>
</body>
</html>